<template>
  <div class="main">
    <govheader title="化工产业大脑 · 亩均总览" @zfNameflagChange="zfNameflagChange"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="padding-left: 25px;" v-if="zfNameflag">
      <el-col :span="8" class="content-left" style="width: 35.146%">
        <el-col class="box">
          <div class="title">全省化工亩均效益</div>
          <div class="content-body" style="margin-top: 10px;">
            <div class="content-body-left">
              <img src="../../../assets/img/tax-mark.png" alt class="img-mark" />
              <div style="width: 100%;text-align: center;">
                <div class="top-value">{{indexData.perMuSum}}</div>
                <div
                  class="compare-body"
                  :style="{ backgroundColor: indexData.perMuTaxPer >= 0 ? '#228F0C' : '#F2632B' }"
                >
                  <i :class="indexData.perMuTaxPer >= 0 ? 'el-icon-top' : 'el-icon-bottom' "></i>
                  {{indexData.perMuTaxPer}}%
                </div>
              </div>
              <div style="width: 100%">
                <div class="top-title">亩均税收（万元）</div>
              </div>
            </div>
            <div class="content-body-right">
              <img src="../../../assets/img/added-mark.png" alt class="img-mark" />
              <div style="width: 100%;text-align: center;">
                <div class="top-value">{{indexData.perMuAddSum}}</div>
                <div
                  class="compare-body"
                  :style="{ backgroundColor: indexData.perMuAddPer >= 0 ? '#228F0C' : '#F2632B' }"
                >
                  <i :class="indexData.perMuAddPer >= 0 ? 'el-icon-top' : 'el-icon-bottom' "></i>
                  {{indexData.perMuAddPer}}%
                </div>
              </div>
              <div style="width: 100%">
                <div div class="top-title">亩均增加值（万元）</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">核心指标</div>
          <div class="content-body" style="padding: 5px 0px;">
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">全员劳动指标率（万元/人）</span>
              </div>
              <div class="index-content">
                <div class="content-value">{{indexData.totalLaborProduction}}</div>
                <div style="width: 50%;float:left;">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{ backgroundColor: indexData.totalLaborProductionPer >= 0 ? '#228F0C' : '#F2632B' }"
                  >
                    <i
                      :class="indexData.totalLaborProductionPer >= 0 ? 'el-icon-top' : 'el-icon-bottom' "
                    ></i>
                    {{indexData.totalLaborProductionPer}}%
                  </div>
                </div>
              </div>
            </div>
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">单位能耗增加值（万元/吨标煤）</span>
              </div>
              <div class="index-content">
                <div class="content-value">{{indexData.energyAddedValue}}</div>
                <div style="width: 50%;float:left;">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{ backgroundColor: indexData.energyAddedValuePer >= 0 ? '#228F0C' : '#F2632B' }"
                  >
                    <i
                      :class="indexData.energyAddedValuePer >= 0 ? 'el-icon-top' : 'el-icon-bottom' "
                    ></i>
                    {{indexData.energyAddedValuePer}}%
                  </div>
                </div>
              </div>
            </div>
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">单位排放增加值（万元/吨）</span>
              </div>
              <div class="index-content">
                <div class="content-value">{{indexData.dischargeAddedValue}}</div>
                <div style="width: 50%;float:left;">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{ backgroundColor: indexData.dischargeAddedValuePer >= 0 ? '#228F0C' : '#F2632B' }"
                  >
                    <i
                      :class="indexData.dischargeAddedValuePer >= 0 ? 'el-icon-top' : 'el-icon-bottom' "
                    ></i>
                    {{indexData.dischargeAddedValuePer}}%
                  </div>
                </div>
              </div>
            </div>
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">R&D经费支出占主营业务收入之比</span>
              </div>
              <div class="index-content">
                <div class="content-value">{{indexData.rdExpenditure}}</div>
                <div style="width: 50%;float:left;">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{ backgroundColor: indexData.rdExpenditurePer >= 0 ? '#228F0C' : '#F2632B' }"
                  >
                    <i :class="indexData.rdExpenditurePer >= 0 ? 'el-icon-top' : 'el-icon-bottom' "></i>
                    {{indexData.rdExpenditurePer}}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 0px;">
          <div class="title">总量指标</div>
          <div class="content-body">
            <el-row :gutter="10" style="width: 100%;margin-left: 0px;margin-top: 10px;">
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">税收实际贡献</div>
                  <div class="total-index-unit">单位：亿元</div>
                  <div class="total-index-value">{{indexData.actualTaxContribution}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">工业增加值</div>
                  <div class="total-index-unit">单位：亿元</div>
                  <div class="total-index-value">{{indexData.industrialAddedValue}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">主营业务收入</div>
                  <div class="total-index-unit">单位：亿元</div>
                  <div class="total-index-value">{{indexData.mainBusinessIncome}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">实际占地面积</div>
                  <div class="total-index-unit">单位：亩</div>
                  <div class="total-index-value">{{indexData.actualFloorArea}}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="width: 100%;margin-top: 10px;margin-left: 0px;">
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">年平均职工人数</div>
                  <div class="total-index-unit">单位：人</div>
                  <div class="total-index-value">{{indexData.employees}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">研发经费支持</div>
                  <div class="total-index-unit">单位：亿元</div>
                  <div class="total-index-value">{{indexData.rdFundingSupport}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">综合能耗(等价)</div>
                  <div class="total-index-unit">单位：万吨标煤</div>
                  <div class="total-index-value">{{indexData.energyConsumption}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">排污量</div>
                  <div class="total-index-unit">单位：万吨</div>
                  <div class="total-index-value">{{indexData.dischargeCapacity}}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-col>
      <el-col :span="7" class="content-center" style="background-color: (255, 255, 255, 0.5);">
        <div id="annular1" style="width: 100%; height: 456px"></div>
        <div class="box" style="margin-top: 10px;margin-bottom: 0px;">
          <div class="title">园区亩均效益</div>
          <div class="content-body" style="overflow: hidden">
            <div id="annular2" style="width: 100%;height: 244px"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right" style="width: 35.146%">
        <el-row :gutter="15">
          <el-col :span="12">
            <div class="box" style="position: relative;">
              <div class="title">亩均趋势</div>
              <div id="annular3" style="width: 100%;height: 183px"></div>
              <el-select
                class="select-body"
                style="width: 112px;"
                placeholder="请选择"
                v-model="selectType"
                @change="typeChange"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box" style="position: relative;">
              <div class="title">
                <p>行业分布情况</p>
              </div>
              <div id="annular4" style="width: 100%;height:183px"></div>
              <el-select
                class="select-body"
                style="width: 80px;"
                placeholder="请选择"
                v-model="selectKind"
                @change="kindChange"
              >
                <el-option
                  v-for="item in kindList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px;">
              <div class="title">企业分类清单</div>
              <div class="content-body">
                <div style="width: 100%;height: 200px;background: #D6E6FF;border-radius: 10px;">
                  <div id="annular5" style="width: 40%;height: 200px;float: left;"></div>
                  <div class="enterprise-body">
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #00A3FF;"></div>
                      <div class="enterprise-type">A类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #00A3FF;">{{enterpriseCount.entA}}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #00DBD4;"></div>
                      <div class="enterprise-type">B类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #00DBD4;">{{enterpriseCount.entB}}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #A885F0;"></div>
                      <div class="enterprise-type">C类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #A885F0;">{{enterpriseCount.entC}}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #5F83FF ;"></div>
                      <div class="enterprise-type">D类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div
                        class="enterprise-count"
                        style="color: #5F83FF ;"
                      >{{enterpriseCount.entD}}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #65D77B;"></div>
                      <div class="enterprise-type">暂无评价</div>
                      <div class="enterprise-unit">家</div>
                      <div
                        class="enterprise-count"
                        style="color: #65D77B;"
                      >{{enterpriseCount.NoEvaluation}}</div>
                    </div>
                  </div>
                </div>
                <el-table
                  ref="table1"
                  :data="tableData"
                  style="width: 100%;margin-top: 10px;"
                  height="269px"
                  :cell-style="{padding:'6px 0px'}"
                  :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
                  :cell-class-name="tableRowClassName"
                >
                  <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                  <el-table-column
                    property="entName"
                    align="center"
                    :show-overflow-tooltip="true"
                    label="企业名称"
                  ></el-table-column>
                  <el-table-column
                    property="entType"
                    align="center"
                    :show-overflow-tooltip="true"
                    label="企业评级"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import dd from 'gdt-jsapi';
import govheader from '@/components/govheader'
import govnavigation from '@/components/govnavigation'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data() {
    return {
      indexData: {
        actualTaxContribution: '0', // 税收实际贡献
        dischargeAddedValue: '0', // 工业增加值
        mainBusinessIncome: '0', // 主营业务收入
        actualFloorArea: '0', // 实际占地面积
        employees: '0', // 年平均职工数
        rdFundingSupport: '0', // 研发经费支出
        energyConsumption: '0', // 综合能耗
        dischargeCapacity: '0', // 排污量

        totalLaborProduction: '0', // 全员劳动生产率
        totalLaborProductionPer: '0', // 全员劳动生产率per
        energyAddedValue: '0', // 单位能耗增加值
        energyAddedValuePer: '0', // 单位能耗增加值per
        industrialAddedValue: '0', // 单位排放增加值
        dischargeAddedValuePer: '0', // 单位排放增加值per
        rdExpenditure: '0', // 研发经费支出占比
        rdExpenditurePer: '0', // 研发经费支出占比per

        perMuTax: '0', // 亩均税收
        perMuAdd: '0', // 亩均增加值
        perMuTaxPer: '0', // 亩均税收per
        perMuAddPer: '0', // 亩均增加值per
      },
      enterpriseCount: {
        entA: '0',
        entB: '0',
        entC: '0',
        entD: '0',
        NoEvaluation: '0',
      },
      zfNameflag: true,
      nowDate: '',
      selectType: '01',
      typeList: [
        { value: '01', label: '亩均税收' },
        { value: '02', label: '亩均增加值' },
      ],
      selectKind: 'A',
      kindList: [
        { value: 'A', label: 'A类' },
        { value: 'B', label: 'B类' },
      ],
      tableData: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      option1Data: [
        { name: '台州市', value: 14.65 },
        { name: '湖州市', value: 13.06 },
        { name: '舟山市', value: 7.69 },
        { name: '温州市', value: 9.15 },
        { name: '宁波市', value: 10.32 },
        { name: '丽水市', value: 13.55 },
        { name: '金华市', value: 8.93 },
        { name: '嘉兴市', value: 8.54 },
        { name: '衢州市', value: 11.67 },
        { name: '绍兴市', value: 18.91 },
        { name: '杭州市', value: 15.27 },
      ],
      option1MinData: 5,
      option1MaxData: 20,
      option2XData: [],
      option2Data: [],
      option3XData: [],
      option3Data: [],
      option3TaxData: [],
      option3AddData: [],
      option4Data: [],
      option5Data: [],
      intervalId: null,
    }
  },
  //   created () {
  //     dd.getAuthCode({}).then(res =>{
  //       if (res) {
  //         let params = {
  //           applicationFlag: '20',
  //           authCode: res.auth_code
  //         }
  //         this.$http.post(`/home/sys/loginfree/authentication`, params)
  //           .then(({ data: res }) => {
  //             console.log('res2:',res);
  //             this.$store.commit('zfName', res.data.lastName)
  //             if (res.code !== 0) {
  //               this.zfNameflag = false
  //             }
  //           }).catch(() => {
  //             this.zfNameflag = false
  //           })
  //       }
  //     }).catch(() => {
  //       this.zfNameflag = false
  //     })
  //   },
  // 调用
  mounted() {
    if (this.zfNameflag) {
      this.getData()
      this.getright_table()
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
    clearInterval(this.startCharts)
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val
    },
    getright_table() {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    getData() {
      this.$http
        .post(`/home/government/govBenefit/getBenefit`, {
          rate: 'A',
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.indexData = res.data.coreIndicators
            this.enterpriseCount = res.data.entRate
            this.tableData = res.data.entRate.entABList

            this.option2XData = res.data.parkPerMu.parkPerMuInfo.map((item) => {
              return item.parkName
            })
            this.option2Data = res.data.parkPerMu.parkPerMuInfo.map((item) => {
              return item.parkMuPerTax
            })

            this.option3XData = res.data.coreIndicators.perMuTax.perMuYearList
            this.option3Data = res.data.coreIndicators.perMuTax.perMuValue
            this.option3TaxData = res.data.coreIndicators.perMuTax.perMuValue
            this.option3AddData = res.data.coreIndicators.perMuTax.perMuAddValue

            this.option4Data = res.data.entRate.industryDistribution.map(
              (item) => {
                return {
                  name: item.name,
                  value: Number(item.entNum),
                }
              }
            )

            this.option5Data.push({
              name: 'A类企业',
              value: res.data.entRate.entA,
            })
            this.option5Data.push({
              name: 'B类企业',
              value: res.data.entRate.entB,
            })
            this.option5Data.push({
              name: 'C类企业',
              value: res.data.entRate.entC,
            })
            this.option5Data.push({
              name: 'D类企业',
              value: res.data.entRate.entD,
            })
            this.option5Data.push({
              name: '暂无评价',
              value: res.data.entRate.NoEvaluation,
            })

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    // 浙江省地图
    renderMyChart1() {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('./zhejiang.json')
      echarts.registerMap('zhejiang', uploadedDataURL)

      this.option1 = {
        title: {
          text: '各地市化工产业亩均税收分布',
          top: '10px',
          textStyle: {
            fontSize: 14,
            width: '100%',
            color: '#1c4ca1',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br>亩均税收：  {c}万元',
        },
        visualMap: {
          type: 'continuous',
          orient: 'vertical',
          text: ['', '(万元)'],
          showLabel: true,
          seriesIndex: [0],
          min: this.option1MinData,
          max: this.option1MaxData,
          inRange: {
            color: ['#6ACAC2', '#4DCAF6', '#4DABFF'],
          },
          textStyle: {
            color: '#333333',
          },
          bottom: 10,
          right: 10,
        },
        series: [
          {
            type: 'map',
            mapType: 'zhejiang', // 自定义扩展图表类型
            label: {
              show: true,
              color: '#fff',
            },
            map: 'zhejiang',
            // center: [104.114129, 37.550339],//当前视角的中心点
            zoom: 1, // 当前视角的缩放比例
            roam: true, // 是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC',
              },
              label: {
                color: '#ffffff',
              },
            },
            select: {
              itemStyle: {
                areaColor: '#005DDC',
              },
              label: {
                color: '#ffffff',
              },
            },
            data: this.option1Data,
          },
        ],
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2() {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis',
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: '0%',
          right: '0%',
          top: '15%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              width: 50,
              lineHeight: 15,
              overflow: 'break',
            },
            data: this.option2XData,
          },
        ],
        yAxis: {
          type: 'value',
          name: '万元',
          splitLine: {
            lineStyle: {
              color: '#333333',
            },
          },
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: 'rgb(97, 133, 255)',
            },
            data: this.option2Data,
          },
        ],
      }
      this.myChart2.setOption(this.option2)
    },
    renderMyChart3() {
      this.myChart3 = echarts.init(document.getElementById('annular3'))
      this.option3 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis',
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: '0%',
          right: '0%',
          bottom: '2%',
          top: '25%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            data: this.option3XData,
          },
        ],
        yAxis: {
          type: 'value',
          name: '万元',
          splitLine: {
            lineStyle: {
              color: '#333333',
            },
          },
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: 'rgb(97, 133, 255)',
            },
            data: this.option3Data,
          },
        ],
      }
      this.myChart3.setOption(this.option3)
    },
    renderMyChart4() {
      var _this = this
      _this.myChart4 = echarts.init(document.getElementById('annular4'))
      _this.option4 = {
        color: [
          '#00A3FF',
          '#00DBD4',
          '#A885F0',
          '#5F83FF',
          '#65D77B',
          '#F3A52A',
        ],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
          orient: 'horizontal',
          top: 'bottom',
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '55%'],
            data: _this.option4Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
              label: {
                show: true,
              },
            },
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c}',
              fontSize: '20',
              fontWeight: 'bold',
              width: 100,
              overflow: 'truncate',
            },
          },
        ],
      }
      _this.myChart4.setOption(_this.option4)

      var flag = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      _this.myChart4.on('mouseover', function (param) {
        flag = false
        clearInterval(_this.startCharts)
        // 取消之前高亮图形
        _this.myChart4.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        })

        charPiecurrentIndex = param.dataIndex
        // 记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        _this.myChart4.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        })

        _this.myChart4.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        })
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = _this.option4.series[0].data.length

        // 取消之前高亮的图形
        _this.myChart4.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        _this.myChart4.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        })
        // 显示 tooltip
        _this.myChart4.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        })
      }

      _this.startCharts = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart4.on('mouseout', function (param) {
        if (!flag) {
          _this.startCharts = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    renderMyChart5() {
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      this.option5 = {
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        tooltip: {
          show: false,
          trigger: 'item',
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: this.option5Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
              label: {
                show: true,
              },
            },
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c}',
              fontSize: '20',
              fontWeight: 'bold',
              width: 100,
              overflow: 'truncate',
            },
          },
        ],
      }
      this.myChart5.setOption(this.option5)
    },
    tableRowClassName({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    typeChange(value) {
      this.selectType = value

      if (value === '01') {
        this.option3.series[0].data = this.option3TaxData
        this.myChart3.setOption(this.option3)
      } else {
        this.option3.series[0].data = this.option3AddData
        this.myChart3.setOption(this.option3)
      }
    },
    kindChange(value) {
      this.selectKind = value

      this.$http
        .post(`/home/government/govBenefit/getBenefit`, {
          rate: value,
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.option4Data = res.data.entRate.industryDistribution.map(
              (item) => {
                return {
                  name: item.name,
                  value: Number(item.entNum),
                }
              }
            )

            clearInterval(this.startCharts)
            this.myChart4.dispose()
            this.renderMyChart4()
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  background-image: url('../../../assets/img/zf/bg.png');
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 47.5%;
    height: 161px;
    margin-left: 0.5%;
    background-image: url('../../../assets/img/blue-back.png');
    background-size: 100% 100%;
  }
  .content-body-right {
    width: 47.5%;
    height: 161px;
    margin-left: 4%;
    background-image: url('../../../assets/img/yellow-back.png');
    background-size: 100% 100%;
  }
}
.index-body {
  width: 47.5%;
  background: rgb(219, 239, 255);
  height: 77px;
  margin: 5px;
  border-radius: 8px;
  padding: 10px 0px 10px 10px;
}
.index-title {
  width: 100%;
  height: 16px;
}
.index-content {
  width: 100%;
  margin-top: 10px;
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00a3ff;
  float: left;
}
.title-content {
  float: left;
  margin-left: 5px;
  color: #4b5463;
  font-size: 13px;
  line-height: 15px;
}
.content-value {
  color: rgb(0, 163, 255);
  font-size: 24px;
  font-weight: 600;
  width: 45%;
  text-align: right;
  float: left;
}
.compare-word {
  color: #4b5463;
  margin-left: 8px;
  margin-top: 10px;
  float: left;
  font-size: 12px;
}
.compare-body {
  color: #ffffff;
  margin-left: 5px;
  margin-top: 5px;
  // float:left;
  padding: 3px;
  font-size: 12px;
  border-radius: 4px;
  display: inline-block;
}
.img-mark {
  margin-top: 10px;
  margin-left: 78px;
}
.top-value {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  display: inline-block;
  // width: 57%;
  // text-align: right;
  // float:left;
}
.top-title {
  width: 100%;
  font-size: 15px;
  color: #ffffff;
  float: left;
  text-align: center;
  margin-top: 5px;
}
.total-index-body {
  height: 112px;
  background: rgba(255, 255, 255, 0.5);
  padding: 18px 10px;
}
.total-index-title {
  width: 100%;
  font-size: 13px;
  color: #4b5463;
}
.total-index-unit {
  font-size: 12px;
  color: #4b5463;
  margin-top: 8px;
}
.total-index-value {
  font-size: 20px;
  color: #00a3ff;
  font-weight: 600;
  margin-top: 15px;
}
.enterprise-body {
  float: left;
  width: 55%;
  height: 200px;
  padding: 25px 5px;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #b2d4f0;
  border-style: dashed;
  padding: 0px 5px;
}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  color: #4b5463;
  line-height: 30px;
  float: left;
  margin-left: 12px;
}
.enterprise-count {
  font-size: 18px;
  line-height: 30px;
  float: right;
  margin-right: 12px;
}
.enterprise-unit {
  font-size: 13px;
  color: #4b5463;
  line-height: 30px;
  float: right;
}
/deep/ .table-row1 {
  background-color: #ebf3ff;
}
/deep/ .table-row2 {
  background-color: #d6e6ff;
}
.select-body {
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  right: 10px;
  top: 15px;
}
.select-body /deep/ .el-input__inner {
  color: #697c9b !important;
  height: 30px;
  line-height: 25px;
  font-size: 13px;
}
.select-body /deep/ .el-input__icon {
  line-height: 20px;
}
/deep/ .gutter {
  background-color: rgb(234, 242, 255);
}
/deep/ .el-table__body-wrapper {
  background-color: rgb(234, 242, 255);
}

.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>
